<template>
    <div class="dashboard-container">
       <dynamic-table ref='table' :table-data="tableData" :table-header="tableList"></dynamic-table>
    </div>
  </template>
  
  <script>
  import DynamicTable from '@/components/DynamicTable'
  import { getTable, getTableRecord } from '@/api/question'
  import { groupBy } from '@/utils/index.js'
  
  export default {
    name: "Dashboard",
    components:{
      DynamicTable
    },
    data() {
      return {
        tableList:[],
        tableData: [],
        param:[],
        tableConfig: [
          {
            id: 100,
            name: "一级表头",
            prop: "",
            width: "",
            child: [
              { id: 110, name: "二级表头1", prop: "districtName", width: "" },
              { id: 120, name: "二级表头2", prop: "timeDimension", width: "" }
            ]
          },
          {
            id: 300,
            name: "一级表头",
            prop: "",
            width: "",
            child: [
              {
                id: 310,
                name: "二级表头",
                prop: "",
                width: "",
                child: [
                  {
                    id: 311,
                    name: "三级表头",
                    prop: "liveLandArea",
                    width: "",
                  },
                  {
                    id: 312,
                    name: "三级表头",
                    prop: "liveLandDst",
                    width: ""
                  }
                ]
              },
              {
                id: 320,
                name: "二级表头",
                prop: "",
                width: "",
                child: [
                  {
                    id: 321,
                    name: "三级表头(km²)",
                    prop: "employmentLandArea",
                    width: ""
                  },
                  {
                    id: 322,
                    name: "三级表头",
                    prop: "employmentLandDst",
                    width: ""
                  }
                ]
              }
            ]
          },
          
          
        ]
      }
    },
      
      
    created() {
      this.requestTableById()
      this.requestRecord()
    },
    methods: {
      requestTableById(){
        getTable({task: 6}).then(res=>{
          const result =res.data
          this.tableList = this.formatData(result.parent)
        })
      },
      requestRecord(){
        getTableRecord({form:6}).then(res=>{
          const data = res.data.results
          const arr = []
          const list = this.handFilter(data)
          Object.keys(list).forEach(item=>{
            let temp = {}
            list[item].forEach((item,index)=>{
              temp['p_content' + item.parent] = item.p_content
              temp[item.parent+'c_content' + item.child] = item.c_content
            })
            this.tableData.push(temp)
          })
        })
      },
      handFilter(data){
        const res = data.filter(e=>e.uuid)
        return groupBy(res,'uuid')
      },
      formatData(data){
        let temp = {}
        data.forEach((item,index)=>{
          item.p_content = ''
          item.prop = 'p_content' + item.id
          temp['p_content' + item.id] = ''
          if(item.child.length){
            item.child.forEach((e,i)=>{
              e.c_contnet = ''
              e.prop = item.id+'c_content' + e.id
              temp[item.id+'c_content' + e.id] = ''
            })
          }
        })
        return data
      },
    }
  };
  </script>
  
  <style lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 30px;
    }
    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }
  </style>
  